<template>
	<view>
		<view class="travels">
			<view class="classify-view">
				<view class="classify-text">分类</view>
				<block v-for="(item,index) in fication" :key="index">
					<view class="classify">
						<text :class="{ activetext: index == num }" @click="menubtn(index,item.name)">{{item.name}}</text>
					</view>
				</block>
			</view>
			<view class="travels-title">
				<input type="text" placeholder="给旅行日记起个标题吧" class="place-text" v-model="titledata" />
			</view>
			<view class="travels-describe">
				<!-- 多行输入 -->
				<textarea placeholder="描述下你的旅行心得,帮助更多旅行的人" v-model="tipsdata" />
				</view>
		</view>
		<view class="travels-image">
			<view class="topimg">
				<image src="../../static/tab/topimg.png" mode="widthFix" @click="uploadImg()"></image>
			</view>
			<view class="conteng">
				<block v-for="(item,index) in topimg" :key="index">
				<view class="conteng-img">
					<image :src="item" mode="aspectFill" class="uploadimg" @click="preImage(index)"></image>
					<image src="../../static/tab/deteimg.svg" mode="widthFix" class="deleteimg" @click="deleteImg(index)"></image>
				</view>
				</block>
			</view>
		</view>
	<view class="travels-video">
		<view class="topimg">
			<image src="../../static/tab/topvideo.png" mode="widthFix" @click="uploadVideo()"></image>
		</view>
		<view class="uploadvideo" v-if="uploadvideos">
			<video :src="videos" controls objectFit="cover" poster="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2283269831,3519032047&fm=111&gp=0.jpg"></video>
			<image class="pause" src="../../static/tab/delvideo.png" @click="deleteVideo()"></image>
		</view>
	</view>
	<view class="address">
		<view class="address-text">你在哪里</view>
		<view class="address-site">
			<image src="../../static/tab/addimg.svg" mode="widthFix"></image>
			<text @click="chooseCity()">{{address}}</text>
		</view>
	</view>
	<view class="release" @click="suBmitd()">
		发布
	</view>
	<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>
	<!-- 登录模态框 -->
	<view class="warp" v-if="loginList">
		<view class="warp-view">
			<view class="warp-text">请登录在绑定</view>
			<view class="warp-flex">
				<button plain="true" @click="messcancel">取消</button>
				<button plain="true" open-type="getUserInfo" @getuserinfo="getUserInfo">去登录</button>
			</view>
		</view>
	</view>
	<view class="warp" v-if="relend">
		<view class="warp-view tipmin">
			<text>正在提交别jb关了，等着点</text>
		</view>
	</view>
	</view>
</template>
<script>
	import HMmessages from "@/components/HM-messages/HM-messages.vue"
	import {preview,addressdata,login} from '../../common/list.js'
	var util = require('../../common/util.js');
	var time = util.formatTime(new Date());
	import {
		mapState
	} from 'vuex'
	var db = wx.cloud.database()
	var users = db.collection('user')
	export default {
		components: {HMmessages},
		name: 'travels',
		data() {
			return {
				time:time,
				loginList:false,
				classdata: '景点',
				address:'',
				videos:'',
				titledata:'',
				tipsdata:'',
				num:0,
				uploadvideos:false,
				watchaddress:'',
				relend:false,
				topimg:[], 
				fication: [{
						"name": '景点'
					},
					{
						"name": '美食'
					},
					{
						"name": '网红打卡'
					}
				],
				avatarUrl:"",
				nickName:"",
				openid:""
				
			}
		},
		methods: {
			suBmitd(){
				users.get()
				.then((res)=>{
					if(res.data.length == 0){
						this.loginList = true
					}
				})
				let icon ='error'
				if(this.titledata == ''){
					let tip = '标题必填'
					this.proMpt(tip,icon)
				}else if(this.tipsdata == ''){
					let tip = '描述必填'
					this.proMpt(tip,icon)
				}else if(this.topimg.length < 3){
					let tip = '上传的图片不少于三张'
				}else{
					this.userinfo()
				}
			},
			userinfo(){
				users.get()
				.then((res)=>{
					console.log(res)
					if(res.data.length == 0){
						console.log('没登陆')
						this.loginList = true
					}else{
						console.log('登录了')
						let usermen = res.data[0]
						this.avatarUrl = usermen.avatarUrl
						this.nickName = usermen.nickName
						this.openid = usermen._openid
						this.userdata()
						this.relend = true
						}
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			async userdata(){
				// 等待数据同时上传
				let staticimg = await this.staticImg()
				     console.log(staticimg)
				let staticvideo = await this.staticVideo()
					 console.log(staticvideo)
				await this.cloudData(staticimg,staticvideo)
			},
			//用户所有数据提交到数据库
			cloudData(staticimg,staticvideo){
				let datas = {
				classdata:this.classdata,  //景点分类
				titledata:this.titledata, //标题
				tipsdata:this.tipsdata,  // 描述
				staticimg:staticimg,   //图片
				staticvideo:staticvideo,  //视频
				address:this.address,   //定位
				avatarUrl:this.avatarUrl,  //头像
				nickName:this.nickName,   //昵称
				openid:this.openid,
				time:time
				}
				db.collection('userdata').add({
				  // data 字段表示需新增的 JSON 数据
				  data: {
				    datainfo: datas,
					},
					}).then((res)=>{
						console.log(res)
						this.relend = false
						let tip = '数据提交成功'
						let icon = 'success'
						this.proMpt(tip,icon)
						
					}).catch((err)=>{
						console.log(err)
					})
			},
		
			staticVideo(){
				return new Promise((resolve,reject)=>{
					if(this.videos == ''){
						resolve('用户未上传视频')
					}else{
						let videoion = this.videos.lastIndexOf('.')
						let exvideo = this.videos.slice(videoion)
						let cloudpath = `${Date.now()}-${Math.floor(Math.random(0,1) * 10000000)}${exvideo}`
							console.log(cloudpath)
					wx.cloud.uploadFile({
					  cloudPath: 'staticvideo/' + cloudpath,
					  filePath: this.videos, // 文件路径
					}).then((res)=>{
						resolve(res.fileID)
						console.log("【视频上传完毕】")
					})
					.catch((err)=>{
						reject(err)
					})
					}
			})
			},
			staticImg(){
				var imgfileID = []
				return new Promise((resolve,reject)=>{
			this.topimg.forEach((img)=>{
				let imgion = img.lastIndexOf('.')
				let eximg = img.slice(imgion)
				let cloudpath = `${Date.now()}-${Math.floor(Math.random(0,1) * 10000000)}${eximg}`
				wx.cloud.uploadFile({
				  cloudPath: 'static/' + cloudpath,
				  filePath: img, // 文件路径
				}).then(res => {
						imgfileID.push(res.fileID)
						if(imgfileID.length == this.topimg.length){
						resolve(imgfileID)
						}
						console.log('图片上传完成')
				}).catch(error => {
						console.log('图片上传失败',error)
						reject(error)
				})
			}) 
				})
			},
			proMpt(tip,icon){
				this.HMmessages.show(tip,{icon:icon})
			},
			menubtn(index, name) {
				this.num = index
				console.log(name)
				this.classdata = name
			},
			uploadImg(){
				uni.chooseImage({
				    count: 9, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: (res)=> {
						console.log(res)
						this.topimg.push (...res.tempFilePaths)
				    }
				});
			},
			// 删除图片
			deleteImg(index){
				this.topimg.splice(index,1)
			},
		//图片预览
		preImage(index){
			let imglist = this.topimg
			preview(index,imglist)
			.then((data)=>{
				console.log(res)
			})
			.catch((err)=>{
				console.log(err)
			})
		},
		// 上传视频
			uploadVideo(){
				uni.showLoading({
					title:'上传中。。。'
				})
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					maxDuration:20,
				})
				.then((res)=>{
					console.log(res)
					this.videos = res[1].tempFilePath
					this.uploadvideos= true
					uni.hideLoading()
				})
				.catch((err)=>{
					console.log(err)
				})
				
			},
			deleteVideo(){
				this.videos =''
				this.uploadvideos= false
			},
			addRess(){
				addressdata()
				.then((res)=>{
					console.log(res)
					let ct = res.result.ad_info.city
					this.address = ct
				})
				.catch((res)=>{
					console.log(res)
					this.address = '北京市'
				})
			},
			chooseCity(){
				uni.navigateTo({
					url: '../city/city'
				})
			},
			getUserInfo(event) {
				this.loginList = false
				let user = event.detail.userInfo
				login(user)
					.then((res) => {
						console.log(res)
						console.log('登录成功')
						let tip = '登录成功'
						let icon = 'success'
						this.proMpt(tip,icon)
					})
					.catch((err) => {
						console.log(err)
					})
			},
			messcancel() {
				let tip = '用户取消登录'
				let icon = 'error'
				this.proMpt(tip,icon)
				this.loginList = false
			},
		},
		created() {
			this.addRess()
			this.userdata()
		},
		computed:{
			...mapState(['travecity']),
			count(){
				this.watchaddress =  this.travecity.traveing
			},
		},
		watch:{
			watchaddress(newValue,oldValue){
				console.log(newValue)
				this.address = newValue
			}
		},
	}
</script>
<style scoped>
	.travels {
		padding: 10upx 20upx;
	}

	.classify text {
		display: block;
		font-size: 27upx;
		color: #14181e;
		background: #f7f7f7;
		padding: 10upx 20upx;
		border-radius: 20upx;
		margin: 0 30upx;
	}

	.classify {
		display: flex;
	}

	.classify-text {
		font-size: 30upx;
		color: #14181e;
		font-weight: bold;
	}

	.classify-view {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	/* 选中的样式 */
	.activetext {
		background: #ffdd00 !important;
	}

	/* 标题 */
	.place-text {
		color: #808080 !important;
		font-size: 30upx;
	}

	.travels-title {
		margin: 40upx 0;
	}

	/* 描述 */
	.travels-describe textarea {
		width: 100%;
		color: #808080 !important;
		font-size: 30upx;
	}

	/* 上传图片 */
	.topimg image {
		width: 150upx;
		height: 150upx;
		border-radius: 20upx;
	}

	.topimg {
		padding-left: 20upx;
		padding-top: 10upx;
	}

	/* 九宫格 */
	.conteng {
		display: flex;
		flex-wrap: wrap;
		margin-left: 4px;
		margin-right: 4px;
	}

	.conteng-img {
		width: calc((100% / 4) - 8px) !important;
		margin: 4px;
		height: 176upx;
		position: relative;
	}

	.uploadimg {
		width: 100% !important;
		height: 100% !important;
		border-radius: 10upx;
	}

	/* 删除图片 */
	.deleteimg {
		width: 38upx;
		height: 38upx;
		position: absolute;
		top: 6upx;
		right: 6upx;
	}

	/* 视频 */
	.uploadvideo video {
		width: 100%;
		height: 400upx;
		border-radius: 5upx;
	}

	.uploadvideo {
		margin: 0 8px;
		border-radius: 5upx;
		position: relative;
	}

	/* 覆盖视频 */
	.pause {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 6upx;
		right: 6upx;
	}

	/* 位置 */
	.address-site {
		display: flex;
		align-items: center;
	}

	.address-site image {
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}

	.address-site text {
		font-size: 30upx;
		color: #00a2ff;
	}

	.address-text {
		font-size: 30upx;
		color: #333333;
		padding-right: 40upx;
	}

	.address {
		display: flex;
		background: #f1f1f1;
		padding: 20upx 0 20upx 20upx;
		margin-top: 30upx;
		margin-bottom: 160upx;
	}

	/* 发布 */
	.release {
		background: #ffdd00;
		width: 100%;
		height: 100upx;
		font-size: 40upx;
		line-height: 100upx;
		text-align: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	/* 提示用户上传成功与否 */
	.warp {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
	}

	.warp-view {
		width: 500upx;
		height: 200upx;
		background: #FFFFFF;
		margin: auto;
		position: absolute;
		-webkit-position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 8upx;
		overflow: hidden;
	}

	/* 提示框 */
	.tipmin text {
		font-size: 34upx;
		display: flex;
		justify-content: center;
		line-height: 200upx;
	}
	.warp {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
	}
	
	.warp-view {
		width: 500upx;
		height: 200upx;
		background: #FFFFFF;
		margin: auto;
		position: absolute;
		-webkit-position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		border-radius: 8upx;
		overflow: hidden;
	}
	
	.warp-text {
		text-align: center;
		margin-top: 30upx;
		font-size: 34upx;
		color: #666666;
	}
	
	.warp-flex {
		display: flex;
		justify-content: space-around;
		border-top: 1upx solid #EEEEEE;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80upx;
		line-height: 80upx;
		-webkit-transform: translateZ(0);
	}
	
	.warp-flex button {
		border: none;
		font-size: 30upx;
	}
</style>
